<template>
	<el-dialog 
		v-model="dialog" 
		append-to-body 
		:modal="props.dialogModal"
		:close-on-click-modal="props.dialogClickModalClose"
		:close-on-press-escape="props.dialogESCModalClose" 
		:draggable="props.dialogDraggable"
		:show-close="props.dialogShowClose" 
		:title="props.dialogTitle"
		:width="props.dialogWidth" 
		:align-center="props.dialogAlignCenter"
		:center="props.dialogContentCenter || true" 
		@open="open" 
		@close="close"
	>
			<slot></slot>
			<template #footer v-if="props.dialogFooterBtn">
					<el-button type="primary" @click="SaveSubmit">保存提交</el-button>
					<el-button type="info" @click="CloseSubmit">取消保存</el-button>
			</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'



interface Props {
	visible: boolean,
			dialogTitle?: string; //模态框标题名称
			dialogWidth?: string; //模态框弹窗宽度
			dialogShowClose?: any; //是否显示关闭按钮
			dialogModal?: any; //是否需要模态框(遮罩层)
			dialogAlignCenter?: any; //是否水平垂直对齐模态框
			dialogContentCenter?: any; //模态框header和footer内容是否居中对齐
			dialogFullscreen?: any; //模态框是否为全屏
			dialogClickModalClose?: any; //是否可以通过点击遮罩层关闭Dialog
			dialogESCModalClose?: any; //是否可以通过按下ESC关闭Dialog
			dialogDraggable?: any; //是否开启模态框拖拽功能
			dialogFooterBtn?: any; //是否开启底部操作按钮
}
const props = withDefaults(defineProps<Props>(), {
	visible: false,
	dialogTitle: "默认标题" || "",
	dialogWidth: "40%" || "",
	dialogShowClose: "" || false,
	dialogModal: true || "",
	dialogAlignCenter: true || "",
	dialogContentCenter: "",
	dialogFullscreen: "" || false,
	dialogClickModalClose: "" || false,
	dialogESCModalClose: "" || false,
	dialogDraggable: "" || false,
	dialogFooterBtn: "" || false,
})

const dialog = ref<boolean>(props.visible)

// watch监听
watch(() => props.visible, (newValue, oldValue) => {
	dialog.value = newValue
}, { deep: true, immediate: true })

// 定义Emits数据类型
interface Emits {
	(event: 'save', isShow: boolean): void
	(event: 'cancellation', isShow: boolean): void
	(event: 'open', isShow: boolean): void
	(event: 'close', isShow: boolean): void
}
const emits = defineEmits<Emits>() //将定义Emits数据类型赋值

// 保存提交回调函数
const SaveSubmit = () => {
	emits('save', false) //emit方法供父级组件调用
}
// 取消保存回调函数
const CloseSubmit = () => {
	emits('cancellation', false) //emit方法供父级组件调用
}

// 打开事件回调函数
const open = () => {
	emits('open', true) //emit方法供父级组件调用
}

// 关闭事件回调函数(当显示头部关闭按钮时需调用该回调函数方法 -> dialogShowClose = true 反之)
const close = () => {
	emits('close', false) //emit方法供父级组件调用
}

</script>

<style scoped lang="scss"></style>